<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="success" icon="el-icon-document-add" @click="handleAdd">
        添加
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleListFilter">
        查询
      </el-button>
    </div>
    <el-table ref="table" v-loading="listLoading" :data="list" border fit highlight-current-row row-key="id" style="width: 100%;" :max-height="tableHeight">
      <el-table-column label="商品序号" prop="sequence" align="center" />
      <el-table-column v-for="(item,index) in header" :key="index" :label="item.label" :prop="item.value" align="center">
        <template slot-scope="{row}">
          <div>{{ row.dinnerProductVO[item.value] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.dinnerProductVO.status | statusFilter">
            {{ returnValueToLable(row.dinnerProductVO.status,statusJson) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" @click="handleDetail(row)">
            查看
          </el-button>
          <el-button size="mini" type="primary" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger"
            @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
      @pagination="getList" />
    
    <el-dialog title="商品列表" :close-on-click-modal="false" :visible.sync="dialogVisible" width="1000px">
      <div class="filter-container">
      <el-input v-model="goodsListQuery.identifier$lk" placeholder="商品编号" class="filter-item" clearable/>
      <el-input v-model="goodsListQuery.name$lk" placeholder="商品名称" class="filter-item" clearable/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div>
      <el-table :data="goodsList" border fit highlight-current-row row-key="id" style="width: 100%;" :max-height="400">
        <el-table-column label="商品编号" prop="identifier" align="center" />
        <el-table-column label="商品名称" prop="name" align="center" />
        <el-table-column label="商品分类" prop="categoryName" align="center" />
        <el-table-column label="定价" prop="firstSkuPrice" align="center" />
        <el-table-column label="销量" prop="saleNum" align="center" />
        <el-table-column label="库存" prop="store" align="center" />
        <el-table-column label="供应商名称" prop="gongyingName" align="center" />
        <el-table-column label="商品类型" prop="isSeckillText" align="center" />
        <el-table-column label="审核状态" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.status | statusFilter">
              {{ returnValueToLable(row.status,statusJson) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleSelect(row)">
              入选
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="goodsTotal>0" :total="goodsTotal" :page.sync="goodsListQuery.pageNo" :limit.sync="goodsListQuery.pageSize"
      @pagination="getGoodsList" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="editFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="detail" label-position="right" label-width="110px">
        <el-form-item label="排序序号" prop="sequence">
          <el-input v-model="detail.sequence" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="saveData()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" v-if="dialogDetailVisible" :visible.sync="dialogDetailVisible" width="800px">
      <Detail :row="goods" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogDetailVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import updateTableMixin from '@/mixin/updateTable'
import { zcyxPageByQo, zcyxSave, zcyxUpdate, zcyxRemove } from '@/api/zcyx'
import { productPageByQo, productGetById } from '@/api/product'
import Detail from '../components/detail.vue'

export default {
  name: "zcyxProductDesign",
  directives: { waves },
  props: {

  },
  components: {
    Pagination, 
    Detail, 
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
        2: '',
        3: 'info'
      }
      return statusMap[status]
    }
  },
  mixins: [updateTableMixin],
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        type: '1',
        pageNo: 1,
        pageSize: 20
      },
      header: [
        {label: '商品编号', value: 'identifier'},
        {label: '商品名称', value: 'name'},
        {label: '商品分类', value: 'categoryName'},
        {label: '定价', value: 'firstSkuPrice'},
        {label: '销量', value: 'saleNum'},
        {label: '库存', value: 'store'},
        {label: '供应商名称', value: 'gongyingName'},
        {label: '商品类型', value: 'isSeckillText'},
      ],
      statusJson: [
        { value: 2, label: '审核中' },
        { value: 1, label: '已上架' },
        { value: 0, label: '已下架' },
        { value: 3, label: '已拒绝' }
      ],
      dialogVisible: false,
      goodsList: [],
      goodsTotal: 0,
      goodsListQuery: {
        type: '4',
        identifier$lk: '',
        name$lk: '',
        status: "1",
        pageNo: 1,
        pageSize: 20
      },
      editFormVisible: false,
      detail: {},
      rules: {
        sequence: [{ required: true, message: '请输入', trigger: 'change' }],
      },
      dialogDetailVisible: false,
      goods: {},
      skuHeader: [
        { label: '规格名称', value: 'name' },
        { label: '建议零售价', value: 'guestPrice' },
        { label: '活动价', value: 'priceText' },
        { label: '计量单位', value: 'unit' },
        { label: '净含量(g)', value: 'weight' },
        { label: '库存', value: 'store' },
        { label: '起订量', value: 'startNum' },
      ]
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    handleListFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      zcyxPageByQo(this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.list || []
        this.total = response.totalCount
        this.updateTableHeight()
        this.handleListData(1)
      }).catch(error => {
        this.listLoading = false
        console.log(error);
      })
    },
    handleListData(type) {
      let array = []
      if (type == 1) {
        array = this.list
      } else {
        array = this.goodsList
      }

      for (let index = 0; index < array.length; index++) {
        const row = array[index];

        if (type == 1) {
          if (row.dinnerProductVO.skuList.length > 0) {
            let firstSkuPrice = row.dinnerProductVO.skuList[0].priceText
            this.$set(row.dinnerProductVO, 'firstSkuPrice', firstSkuPrice)
          }
        } else {
          if (row.skuList.length > 0) {
            let firstSkuPrice = row.skuList[0].priceText
            this.$set(row, 'firstSkuPrice', firstSkuPrice)
          }
        }
      }
    },
    handleAdd(){
      this.goodsListQuery.pageNo = 1
      productPageByQo(this.goodsListQuery).then(response => {
        this.goodsList = response.list || []
        this.goodsTotal = response.totalCount
        this.handleListData(2)
        this.dialogVisible = true
      })
    },
    getGoodsList() {
      productPageByQo(this.goodsListQuery).then(response => {
        this.goodsList = response.list || []
        this.goodsTotal = response.totalCount
        this.handleListData(2)
      })
    },
    handleFilter() {
      this.goodsListQuery.pageNo = 1
      this.getGoodsList()
    },
    handleSelect(row) {
      zcyxSave({ ids: [row.id], type: 1 }).then(response => { 
        this.$message.success("操作成功");
        this.getList()
      }).catch(error => {
        console.log(error);
      })
    },
    handleDetail(row) {
      this.getDetail(row.dinnerProductVO.id).then(res => {
        this.goods = Object.assign({}, res)
        this.dialogDetailVisible = true;
      })
    },
    getDetail(id) {
      return new Promise((resolve, reject) => {
        productGetById({ id: id})
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    handleEdit(row) {
      this.editFormVisible = true
      this.detail = Object.assign({}, row)
    },
    saveData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let params = {id: this.detail.id, sequence: this.detail.sequence}
          zcyxUpdate(params).then(() => {
            this.getList()
            this.editFormVisible = false
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否继续删除？').then(() => {
        zcyxRemove({ ids: [row.id], type: 1 }).then(() => {
          this.$message({
              message: '操作成功',
              type: 'success'
            })
          this.getList()
        })
      })
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  
</style>